<? include 'includes/login_check.php'; ?>



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
	<?php include 'includes/head.php' ?>
	<link href="css/custom.css" rel="stylesheet" type="text/css" />
	<script src="js/jquery.validate.min.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		$(function(){
			$('.main-content').jqTransform({imgPath:'jqforms/img/'});
		});
		function TimeOnly() {
			$.get('includes/validate/win_by_time.php', function (data) {
				$('#challenge_end_container').html(data);
			});
		};
		function VotesOnly() {
			$.get('includes/validate/win_by_votes.php', function (data) {
				$('#challenge_end_container').html(data);
			});
		};
		function Both() {
			$.get('includes/validate/win_by_both.php', function (data) {
				$('#challenge_end_container').html(data);
			});
		};
	</script>
	
	<script type="text/javascript">
		$(document).ready(function() {
			$("#chl_form").validate();
		});
    </script>
	
	<style type="text/css">
	label { width: 10em; float: left; }
	label.error { float: none;
	color: #027AA0;
	padding: 10px;
	vertical-align: top;
	font-size: 15px;
	border-left: 2px solid;
}
	em { font-weight: bold; padding-right: 1em; vertical-align: top; }
	.error {
		background-color:#D7F5B1;
	}
	</style>
	</head>

<body class="create_challenge">

<div id="top">
    <div id="header">
    	<?php include 'includes/nav_container.php' ?>
    </div>
</div>

<div id="wrapper">
	<table>
		<tr>
            <td id="col-left">
            	<?php include 'includes/current_activity.php' ?>
            </td>
			<td id="col-main" class="challenge-main">
            	<div>
                    <div class="main-title">
                        <h2> 
                            <span>Create a Challenge</span>
                            <br class="cleft" />
                        </h2>
            		</div>
              		<div class="main-content">
                        <form class="color_form chl_form" name="chl_form" id="chl_form" method="POST" action="create_challenge_process.php">
                            <div class="block-left">
                                <div class="form_item create_title">
                                    <p class="fi_header" style="background:#c63c3c;"><span>Step 1: Create a title</span></p>
                                    <div class="element">
                                        <input class="title required" id="title" name="title" type="text" />
                                    </div>
                                </div>
                                <div class="form_item write_desc">
                                    <p class="fi_header" style="background:#d55a29;"><span>Step 2: Write a short description of the rules</span></p>
                                    <div class="element">
                                        <textarea class="desc required"  id="desc" name="desc" /></textarea>
                                    </div>
                                </div>
                                <div class="form_item set_details">
                                    <p class="fi_header" style="background:#398d97;"><span>Step 3: Set the details of the challenge</span></p>
                                    <div class="chl_settings_container">
                                        
                                        <div class="chl_settings">
                                            <p><span>Who's the challenge open to?</span></p>
                                            <div class="options">
                                                <div class="inactive">
                                                    <span class="label">Private Contest</span>
                                                    <input name="private_or_public" checked="yes" type="radio" value="0" />
                                                </div>
                                                <div>
                                                    <span class="label">Public contest</span>
                                                    <input name="private_or_public" type="radio" value="1" />
                                                </div>
                                                <div>
                                                    <span class="label">Number of challengers</span>
                                                    <div class="jqdrop_right">
                                                        <select id="how_many_contestants" name="how_many_contestants" >
                                                            <option value="2">2</option>
                                                            <option value="3">3</option>
                                                            <option value="4">4</option>
                                                            <option value="5">5</option>
                                                            <option value="6">6</option>
                                                            <option value="7">7</option>
                                                            <option value="8">8</option>
                                                        </select>
                                                    </div>
                                                </div>
                                                <br class="cleft" />
                                            </div>
                                        </div>
                                            
                                        <div class="chl_settings">
                                            <p><span>How will this contest end?</span></p>
                                            <div class="options">
                                                <div>
                                                    <span class="label">Win by time</span>
                                                    <input name="challenge_end" onClick="TimeOnly();" type="radio" checked="yes" value="time" />
                                                </div>
                                                <div>
                                                    <span class="label">Win by votes</span>
                                                    <input name="challenge_end" onClick="VotesOnly();" type="radio" value="votes" />
                                                </div>
                                                <div>
                                                    <span class="label">Both (whichever happens first)</span>
                                                    <input name="challenge_end" type="radio" onClick="Both();" value="both" />
                                                </div>
                                                <br class="cleft" />
                                            </div>
                                		</div>
                                        
                                        <div class="chl_settings" id="challenge_end_container">
                                        	<div class="options_container">
                                                <p><span>How long should the challenge last?:</span></p>
                                                <div class="options">
                                                    <div>
                                                        <select id="times" name="times" >
                                                            <option value="24">1 day</option>
                                                            <option value="72">3 days</option>
                                                            <option value="168">1 week</option>
                                                            <option value="336">2 weeks</option>
                                                            <option value="744">1 month</option>
                                                        </select>
                                                    </div>
                                                </div>
                                            </div>
    										<br class="cleft" />
                               			</div>
                                        
                                	</div>
                                </div>
                            </div>
                            <div class="block-right submit">
                                <div class="form_item">
                                <p class="fi_header" style="background:#7f9c31;"><span>Step 4: Invite friends</span></p>
                                <div class="element">
                                <select id="friends"  name="friends" >
                                <option value="">None</option>
                                <?php 
								require 'config/dbconfig.php';
								$result = mysql_query("SELECT username,id FROM users");
								while($row = mysql_fetch_array($result)) {
									$username1 = $row['username'];
									$id1 = $row['id'];
									echo "<option value='$id1'>$username1</option>";
								}
								?>
                                </select>
                                </div>
                                </div>
                            	<input type="submit" id="submitBtn" name="submitBtn" value="">
                            </div>
                        </form>
            		</div>
                </div>
            </td>
          <!--<td id="col-right"></td>--> 
        </tr>
    </table>
</div>
<div id="bottom"> </div>
</body>
</html>
